<template>
	<view class="content">

		<view class="detail flex flex-col justify-center items-center w100">
			<view class="award_info flex  flex-col w100 justify-center items-center">
				<view class="f_36 c_0">{{name}}</view>
				<view class="f_28 red mt_20">领奖截止时间：{{myluck.receiveEndTime}}</view>
			</view>
			<template v-if="myluck.receiveType==1">
				<view class="myaddinfo w100 mt_40">
					<view class="title flex flex-row justify-center items-center">
				
						<text>收货信息</text>
				
					</view>
					<view class="list flex flex-col w100">
						<view class="item flex flex-row justify-between items-center">
							<text class="f_28 c_3">联系人姓名：</text>
							<text class="f_28 c_6">{{myluck.realName}}</text>
				
						</view>
				
						<view class="item flex flex-row justify-between items-center">
							<text class="f_28 c_3">联系人电话：</text>
							<text class="f_28 c_6">{{myluck.phone}}</text>
				
						</view>
				
						<view class="item flex flex-row justify-between items-center">
							<text class="f_28 c_3">收货地址：</text>
							<text class="f_28 c_6 w100 right"
								style="width: 450rpx;line-height: 1.3;text-align: right;">{{myluck.province}}{{myluck.city}}{{myluck.district}}{{myluck.detail}}</text>
						</view>
					</view>
				
				
				</view>
				
				<view class="myaddinfo w100 mt_40">
					<view class="title flex flex-row justify-center items-center">
				
						<text>出奖信息</text>
				
					</view>
					<view class="list flex flex-col w100">
				
						<view class="item flex flex-row justify-between items-center">
							<text class="f_28 c_3">物流公司：</text>
							<input type="text" placeholder="请输入物流公司名称" value="" v-model="myluck.expressCompany" />
				
						</view>
						<view class="item flex flex-row justify-between items-center">
							<text class="f_28 c_3">物流单号：</text>
							<input type="text" placeholder="请输入物流单号" value="" v-model="myluck.expressCode" />
				
						</view>
						<view class="item flex flex-row justify-between items-center">
							<text class="f_28 c_3">出奖备注：</text>
							<input type="text" value="" placeholder="请输入备注" />
						</view>
						<view class="item flex flex-row justify-between items-center mt_20">
							<text class="f_28 c_3">出奖图片：</text>
							<view class="flex justify-center items-center zx" @click.stop='uploadpic'>
								<image v-if="myluck.expressImage" :src="myluck.expressImage" mode="" class="zx"></image>
								<image v-else src="@/static/zx.svg" mode="" ></image>
								
							</view>
						</view>
				
				
					</view>
				
					<view class="btn_new" @click="send" v-if="myluck.status==2||myluck.status==1">
						确认出奖
					</view>
				</view>
				
				
			</template>
		<!-- 	自提 -->
			<template v-else>
		
					<view class="myaddinfo w100 mt_40">
						<view class="title flex flex-row justify-center items-center">
					
							<text>用户信息</text>
					
						</view>
						<view class="list flex flex-col w100">
							<view class="item flex flex-row justify-between items-center">
								<text class="f_28 c_3">用户电话：</text>
								<view class="flex flex-row justify-end items-center">
									<text class="f_28 c_6">
										{{myluck.userPhone}}
									</text>
									<text @click="callphone(myluck.userPhone)" class="k_btn">拨打</text>
								</view>
					
					
							</view>
					
							<view class="item flex flex-row justify-between items-center">
								<text class="f_28 c_3">用户昵称：</text>
								<view class="flex flex-row justify-end items-center">
									<text class="f_28 c_6">
										{{myluck.nickname}}
									</text>
									<text @click="fuzhi(myluck.nickname)" class="k_btn">复制</text>
								</view>
								
					
					
							</view>
							<view class="item flex flex-row justify-between items-center">
								<text class="f_28 c_3">兑奖状态：</text>
								<text
									class="f_28 c_6">{{myluck.status==0?'待兑奖':myluck.status==1?'待核销':myluck.status==2?'出奖中':myluck.status==3?'已完成':myluck.status==4?'已取消':myluck.status==5?'已过期':''}}</text>
					
							</view>
					
					<view class="item flex flex-row justify-between items-center">
						<text class="f_28 c_3">兑奖时间：</text>
						<text
							class="f_28 c_6">{{myluck.receiveFinishTime || ''}}</text>
										
					</view>
					
					
						</view>
					
						<view class="title flex flex-row justify-center items-center">
					
							<text>兑奖信息</text>
					
						</view>
						<view class="list flex flex-col w100">
							<view class="item flex flex-row justify-between items-center">
								<text class="f_28 c_3">兑奖状态：</text>
								<text
									class="f_28 c_6">{{myluck.status==0?'待兑奖':myluck.status==1?'待核销':myluck.status==2?'出奖中':myluck.status==3?'已完成':myluck.status==4?'已取消':myluck.status==5?'已过期':''}}</text>
					
							</view>
					
					
					
						</view>
						<view class="flex flex-row justifity-between items-center" v-if="myluck.status==0||myluck.status==1">
							<view class="w50">
								<view class="btn_new k_new" @click="saoma">
									扫码兑奖
								</view>
							</view>
							<!-- <view class="w50" >
								<view class="btn_new k_new btnBg" @click="chushi">
									出示二维码
								</view>
							</view> -->
						</view>
					</view>
					
					<!-- 二维码展示 -->
					<uni-popup ref="buypopup">
						<view class="buylist">
							<view class="buy-title flex flex-row justify-end items-center">
								<image class="close_icon" src="@/static/mine/close.svg" mode="widthFix" @click="close"></image>
							</view>
							<view class="flex flex-row items-center" style="flex-direction: column;">
								<canvas id="qrcode" canvas-id="qrcode"  style="width: 300px; height: 300px"></canvas>
								<view class="flex justify-center items-center mt_20 f_28 c_9">
									让顾客扫一扫领取奖品
								</view>
							</view>
							<view class="fixedbtn1 flex flex-row justify-between  mt_20">
								<view class="btn background_red"   @click="saowan" >确定</view>
							</view>
						
							
						</view>
					</uni-popup>
							
					
				
			</template>
			




		</view>
	</view>

</template>

<script>
	import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';

	import {
		toLogin
	} from '@/libs/login.js';

	import {
		getAddressList,
		getAddressDetail,
		getAddressDefault
	} from '@/api/user.js';
	import {
		mapGetters
	} from "vuex";
	import {
		drawRcordStore,
		prizeSend,
		drawInfo,
		sjsaoprize
	} from '@/api/activity.js';
	export default {
		data() {
			return {
				name: '',
				show: true,
				count: 5,
				value: 0,
				fileList1: [],
				id: '',
				myluck: [],
				yhuid: '',
				detail:{}
			}
		},
		computed: mapGetters(['isLogin', 'chatUrl', 'userInfo', 'uid']),
		onLoad(data) {
			this.id = data.id
			this.yhuid = data.yhuid
			this.getmyluck()
		},
		methods: {
			/**
			 * 上传文件
			 * 
			 */
			uploadpic: function() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'user/upload/image',
					name: 'multipart',
					model: "maintain",
					pid: 0
				}, function(res) {
					that.myluck.expressImage = res.data.url;
				});
			},
			
			// 打电话
			callphone(e){
				 uni.makePhoneCall({
				    phoneNumber: e
				  })
			},
			// 复制
			fuzhi(e){
				uni.setClipboardData({
				    data: e,
				    success: function () {
				        console.log('success');
				        uni.showToast({
				            title: '复制成功'
				        });
				    }
				});
			},
			
			chushi(){
				this.$refs.buypopup.open('center')
			},
			close(){
				this.getmyluck()
				this.$refs.buypopup.close('center')
			},
			saowan(){
				this.getmyluck()
				this.$refs.buypopup.close('center')
			},
		
			saoma() {
				uni.scanCode({
					success: res => {
						let codeArray = res.result
						console.log(codeArray)
						if (res.scanType == 'QR_CODE') {

							sjsaoprize(Number(codeArray)).then(e => {
								uni.showToast({
									title: '兑换成功',
									duration: 2000,
									icon: 'none'
								})
								this.getmyluck()
							}).catch(M=>{
									uni.showToast({
										title: JSON.stringify(M.message),
										duration: 2000,
										icon: 'none'
									})
								})


						
							console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + res.result);
						}else{
							uni.showToast({
								title: '请扫描正确的二维码',
								duration: 2000,
								icon: 'none'
							})
						}
					}
				})
			},
			getma() {

				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = this.myluck.id;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 300;
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
			},
			send() {
				let data = {
					recordId: this.myluck.id,
					expressRemark: this.myluck.expressRemark,
					uid: this.yhuid,
					expressCode: this.myluck.expressCode,
					expressCompany: this.myluck.expressCompany,
					expressImage: this.myluck.expressImage
				}
				prizeSend(data).then(res => {
					uni.showToast({
						title: '出奖成功'
					})
					uni.navigateBack({
						delta: 1
					})
				})
			},

			getmyluck() {
				let data = {
					limit: 100,
					page: 1,
					activityId: this.id,
					isMatch: 1,
					uid: this.yhuid

				}
				drawRcordStore(data).then(res => {
					this.myluck = res.data.list[0]
					this.getdetail()
					this.getma()
					if (this.myluck.receiveType == 2) {
						this.getma()
					}


				})
			},
			//获取详情
			getdetail() {
				drawInfo(this.myluck.activityId).then(res => {
					let name = ''
					this.detail = res.data
					let index = res.data.prizes.findIndex(item => item.id === this.myluck.prizeId);
					console.log(index)
					this.name = res.data.prizes[index].title


				})

			},

			// 奖品出奖


		}
	}
</script>

<style lang="scss">
	
	.close_icon {
		width: 34rpx;
	}
	.buylist{
		background: #fff;
		padding: 30rpx ;
		padding-bottom: 0;
		border-radius: 20rpx;
		width: 650rpx;
  		width: 710rpx;
		input{
			text-align: right;
		}
		.buy-title{
			padding: 20rpx 0;
		}
		.buyactive {
			border-color: #DF4B43!important;
		}
		.buyitem{
			width: 214rpx;
			margin: 20rpx 0;
			padding-top: 40rpx;
			height: 280rpx;
			border:2rpx solid #e8e8e8;
			border-radius:24rpx;
			position: relative;
			.tag{
				margin-top:10rpx;
				background-color: #FFEDC2;
				width: 85%;
				height: 50rpx;
				border-radius: 100rpx;
				font-size: 18rpx;
			}
			.abtag{
				position: absolute;
				width: 134rpx;
				height: 46rpx;
				padding: 8rpx 18rpx;
				border-radius: 0px 10px;
				background: #F54C30;
				color: #fff;
				font-size: 22rpx;
				right: 0;
				top: 0;
			}
		}
	}
	.fixedbtn1 {
			width: 100%;
			
			background-color: #fff;
			z-index: 9;
			.btn {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				width: 90%;
				margin-left: 5%;
				height: 90rpx;
				border-radius: 200px;
	
				text-align: center;
				display: flex;
	
				justify-content: center;
				align-items: center;
	
			}
		}
	
	
	.btnBg{
		background: #DF4B43;
		color: #fff;
	}
	.btn_new {
		border-radius: 10rpx;
		background: #DF4B43;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		height: 84rpx;
		color: #fff;
		margin: 40rpx 0;
		margin-bottom: 20rpx;
	}

	.w50 {
		flex: 1
	}

	.k_new {
		border-radius: 10rpx;
		background: #fff;
		border: 1rpx solid #DF4B43;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		height: 84rpx;
		color: #DF4B43;
		margin: 40rpx 0;
		margin-bottom: 20rpx;
	}
.k_btn {
		border-radius: 6rpx;
		border: 1rpx solid #DF4B43;
		padding: 0 10rpx;
		line-height: 1.5;
		margin-left: 10rpx;
		color: #DF4B43;
		font-size: 26rpx;
	}
	.btnBg{
		background-color: #DF4B43;
		color: #fff;
	}
	.zx {
		width: 180rpx;
		height: 180rpx;
		background: #f2f4f6;
		border-radius: 10rpx;

		image {
			width: 50rpx;
			height: 50rpx;
		}
		.zx{
			width: 180rpx;
			height: 180rpx;
		}
	}

	.title {
		position: relative;
		width: 100%;

		text {
			color: #6F6F6F;
		}
	}

	.title::before {
		width: 140rpx;
		content: "";
		height: 1rpx;
		border-bottom: 1rpx dashed #000;
		margin-right: 20rpx;
	}

	.title::after {
		width: 140rpx;
		content: "";
		height: 1rpx;
		border-bottom: 1rpx dashed #6F6F6F;

		margin-left: 20rpx;
	}

	input {
		width: 70%;
		text-align: right;
		font-size: 28rpx;
	}

	.textarea1 {
		width: 90%;

		textarea {
			width: 480rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			background: #f6f6f6;
			height: 150rpx;
		}
	}

	page,
	body {
		background: #DF4B43 !important;
	}

	.content {
		width: 700rpx;
		margin: 0 auto;

		.myaddinfo {
			position: relative;
		}

		.myaddinfo::before {
			content: "";
			width: 30rpx;
			height: 30rpx;
			background: #DF4B43;
			border-radius: 100%;
			position: absolute;
			left: -60rpx;
			top: 20rpx;

		}

		.myaddinfo::after {
			content: "";
			width: 30rpx;
			height: 30rpx;
			background: #DF4B43;
			border-radius: 100%;
			position: absolute;
			right: -60rpx;
			top: 20rpx;

		}

		.detail {
			padding: 40rpx;
			margin: 60rpx auto;
			background-color: #fff;
			border-radius: 10rpx;
		}

		.list {
			.item {
				line-height: 100rpx;
				border-bottom: 1rpx solid #f6f6f6;
			}
		}
	}
</style>